<template>
  <div class="box">
    <div class="left">
      <div class="member">总人数</div>
      <div class="number">12,256</div>
      <div class="btn">查看详情</div>
    </div>
    <div ref="chart1" class="chart"></div>
  </div>
</template>
<script >
export default {
  name: 'TopLeft',
  mounted() {
    this.echartsInit()
  },
  methods: {
    echartsInit() {
      const dataX = ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
      const y = [10, 28, 30, 44, 61, 58, 77, 60, 78, 53, 70, 103]
      const y1 = [50, 48, 44, 62, 41, 78, 57, 70, 68, 93, 60, 73]
      const options = {
        title: {
          show: false,
          text: '用户数变化',
          left: 'center',
          top: '8%',
          textStyle: {
            color: '#111111', // 标题颜色
            fontWeight: 'bold',
            fontSize: 16
          }
        },
        tooltip: {
          show: false,
          trigger: 'axis',
          backgroundColor: 'rgba(33,56,77,1)',
          borderColor: 'rgba(33,56,77,1)',
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          axisPointer: {
            lineStyle: {
              color: 'rgba(19,255,241,1)',
              type: 'dashed',
              width: 2
            }
          }
        },
        legend: {
          show: false,
          right: 'center',
          top: '5%',
          itemWidth: 16,
          itemHeight: 16,
          itemGap: 25,
          icon: 'stack',
          textStyle: {
            color: '#E1E5E6'
          }
        },
        grid: {
          top: '0%',
          right: '0%',
          bottom: '0%',
          left: '0%',
          containLabel: true
        },
        xAxis: {
          show: false,
          data: dataX,
          type: 'category',
          boundaryGap: true,
          axisLabel: {

            color: '#B5C5D4',
            fontSize: 12

          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false // 去除刻度线
          }
        },
        yAxis: {
          show: false,
          type: 'value',
          axisTick: { show: false },
          axisLine: {
            show: false
          },
          axisLabel: {

            color: '#B5C5D4',
            fontSize: 12

          },
          // y轴分割线的颜色
          splitLine: {
            lineStyle: {
              color: '#9EA6B4',
              type: 'solid'
            }
          }
        },
        series: [
          {
            name: '总流量',
            smooth: true,
            type: 'line',

            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            symbolSize: 8,
            // 设置拐点颜色以及边框
            lineStyle: {
              color: '#d0e3fe',
              width: 3,
              type: 'dashed' // 'dotted' 点型虚线 'solid' 实线 'dashed' 线型虚线
            },
            data: y1
          },
          {
            name: '进园',
            smooth: true,
            type: 'line',
            // 填充颜色设置
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(23, 98, 242,.4)' // 渐变色的起始颜色
                  },
                  {
                    offset: 0.9,
                    color: 'rgba(23, 98, 242,0)' // 渐变线的结束颜色
                  }
                ],
                false
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            symbolSize: 4,
            // 设置拐点颜色以及边框
            itemStyle: {
              // color: "rgba(241,162,42,1)",
              color: 'rgba(23, 98, 242, 1)'
            },
            data: y
          }
        ]
      }
      const myChart = this.$echarts.init(this.$refs.chart1)
      myChart.setOption(options)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.box{
  display: flex;
  //align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 28.49vw;
  height: 10.156vw;
  padding: 0 1.563vw;
  background-color: var(--el-color-primary-light-9);
  border-radius: 0.26vw;

  .left{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 1.563vw 0;

    .member{
      font-weight: 600;
      font-size: 1.042vw;
    }

    .number{
      font-weight: 700;
      font-size: 1.563vw;
    }

    .btn{
      width: 5.208vw;
      height: 1.823vw;
      color: white;
      line-height: 1.823vw;
      text-align: center;
      background-color: var(--el-color-primary);
      border-radius: 2.344vw;
      cursor: pointer;
    }
  }

  .chart{
    width: 17.656vw;
    height: 7.292vw;
    margin-top: 2.083vw;
  }

}
</style>
